<template>
 <div class="login_Box ">

   <div class="header_box">
     <img src="../assets/icon/128-online-payment.png" alt="">
     <span class="header_Title">约稿</span>
   </div>
  <div class="Form">
    
      <!-- 表单 -->
  <Form validate-first @submit="onSubmit" @failed="onFailed">
  <Field v-model="phone" name="phone" label="账号：" :rules="phoneRules" />
  <Field v-model="code" name="code" label="密码：" :rules="codeRules" />
 
  
   <div style="margin: 16px;" class="Button">
    <Button round block type="info" native-type="submit">
     <Icon  class="Login_Icon" name="exchange"  round block type="info"/>
    </Button>
  </div>
</Form>


  </div>  
  <div class="Footer">


  </div>
 
 </div>
</template>
<script>
import { Form ,Button,Field,Icon, Lazyload} from 'vant';         
export default {
  data(){ 
          this.phoneRules = [
      { required: true, message: '请输入手机号' },
      { validator: this.phoneValidator, message: '手机号格式错误' },
    ];
    this.codeRules = [
      { required: true, message: '请输入验证码' },
      { validator: this.codeValidator, message: '验证码错误' },
    ];
   return {
      
      key:1,
      code: '',
      phone: ''
   }
  },
 components: {
      Form,
      Button,
      Field,
      Icon
 },
  beforeCreate:function (){

// 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。



  },
 created:function (){

 // 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，el 属性目前尚不可用。

   this.click(this.key)
    

  },
  beforeMount:function (){

  },
  methods: {

// 在挂载开始之前被调用：相关的 render 函数首次被调用。

click(Vlue,key){
           this.$store.state.arrow = true;
        this.$store.state.Title = "登录";
         this.$store.state.LeftTitle = "返回";


 },
     // 校验函数返回 true 表示校验通过，false 表示不通过
    phoneValidator(val) {
      return /1\d{10}/.test(val);
    },
    // 校验函数返回 Promise 来实现异步校验
    codeValidator(val) {
      return new Promise(resolve => {
    
        this.Toast('验证中...');

        setTimeout(() => {
          this.Toast.clear();
          resolve(/\d{6}/.test(val));
        }, 1000);
      });
    },
    onSubmit(values) {
     
      // 提交用户密码和账号
      let THIS = this
      let api = THIS.pathuiL+"users"
    
      THIS.axios.get(api+"?phone="+values.phone+"&code="+values.code)
  .then(function (response) {
    // handle success
    // 验证status请求是否成功
    if(response.data.length!=0){
      console.log(response.data)
       localStorage.setItem("user", JSON.stringify(response.data[0]));
       THIS.$store.state.login=true;
       THIS.Toast.success('登陆成功');

      //  登录成功去主页
       THIS.$router.push("/")
      //  解除提醒用户去登录消息 
      
       localStorage.setItem("login", JSON.stringify(true));
       
    }else {
   
      THIS.Toast.fail('账号或密码错误');
    }
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });
    },
    onFailed(errorInfo) {
      console.log('failed', errorInfo);
    }

  }

}

</script>

<style lang="scss"  scope>
.login_Box {
  width: 100%;
  height: 100%;
  // background-color: whitesmoke;
  text-align: center;
  display: flex;
  flex-direction: column;

  .header_box{
    width: 100%;
    height: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    order: 1;
    img {
      width: 1.3rem;
      height: 1.2rem;
      margin-right: 0.3rem;
    }
    .header_Title {
      letter-spacing: 0.3rem;
      font-size: 1rem;
      margin-right: -0.5rem;
      color: white;
    }

  }
  .Form {
    order: 2;
    width: 100%;
    display: flex;
    justify-content: center;
    
    .van-form {
    width: 95%;
    height: 5rem;
    .van-cell {
      margin: 0.5rem 0;
      color: white;
      background-color: rgba(0,0, 0, 0);
      .van-field__control {
         background-color: rgba(0,0, 0, 0);
         color:white;
      }
      .van-field__label {
        letter-spacing: 2px;
        font-family: 'Gill Sans', 'Gill Sans MT',  'Trebuchet MS', sans-serif;
      }
    
    }

    
  } 
  .Button {
    display: flex;
    justify-content: center;
     .van-button--info {
    width: 1.5rem;
    height: 1.5rem;
    background-color:rgba(30,144,255,0.5);
    border: none;
    display: flex;
    justify-content: center;
    align-content: center;
     .Login_Icon {
         font-size: 1.5rem;
         color: #1296db;
      }
   
  }
  }
  }
  .Footer {
    width: 100%;
    height: 1rem;
    background-color: wheat;
    order: 3;
    margin-top: 5rem;
  }
}


</style>